<template>
  <div>
    <div class="gva-search-box">
      <el-form :inline="true" :model="searchInfo" class="demo-form-inline">
        <el-form-item label="抽奖/兑换">
          <el-select v-model="searchInfo.goodsType" placeholder="搜索条件" style="width: 100%">
            <el-option v-for="(item, key) in source_typeOptions" :key="key" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="查询时间">
          <el-date-picker v-model="searchDate" @change="onDateChange" type="daterange" range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" :clearable="false" />
        </el-form-item>
        <el-form-item>
          <el-button size="mini" type="primary" icon="search" @click="onSubmit">查询</el-button>
          <!-- <el-button size="mini" icon="refresh" @click="onReset">重置</el-button> -->
        </el-form-item>
      </el-form>
    </div>
    <div class="gva-table-box">
      <!-- <div class="gva-btn-list">
        <el-button size="mini" type="primary" icon="plus" @click="openDialog">导出数据</el-button>
      </div> -->
      <el-table ref="multipleTable" style="width: 100%" tooltip-effect="dark" :data="tableData" row-key="ID" @selection-change="handleSelectionChange">
        <!-- <el-table-column align="center" label="商品id" prop="ID" /> -->
        <el-table-column align="center" label="商品名称" prop="goodsName" />
        <el-table-column align="center" label="已兑换数量" prop="haveNum" />
      </el-table>
    </div>
  </div>
</template>

<script>
const path = import.meta.env.VITE_BASE_API
import { mapGetters } from "vuex"
import { createGoodsInfo, deleteGoodsInfo, deleteGoodsInfoByIds, updateGoodsInfo, findGoodsInfo, getGoodsInfoListDay } from "@/api/goodsInfo" //  此处请自行替换地址
import infoList from "@/mixins/infoList"
const _formData = {
  needNum: 0,
  haveNum: 0,
  goodsName: "",
  goodsType: 1,
  inventoryNum: 0,
  type: 3,
  goodsUrl: "",
  sour: 0,
  createTime: new Date(),
  updateTime: new Date(),
  isDelete: 0,
  probability: 0,
  version: 0,
  appId: "",
  requestUrl: "",
}
export default {
  name: "GoodsInfo",
  mixins: [infoList],
  data() {
    return {
      listApi: getGoodsInfoListDay,
      dialogFormVisible: false,
      type: "",
      deleteVisible: false,
      multipleSelection: [],
      source_typeOptions: [],
      searchDate: [new Date(), new Date()],
      typeOptions: [],
      formData: { ..._formData },
      searchInfo: {
        goodsType: 1,
        startData: new Date(),
        endData: new Date(),
      },
      path,
    }
  },
  computed: {
    ...mapGetters("user", ["userInfo", "token"]),
  },
  async created() {
    await this.getTableData()
    await this.getDict("type")
    await this.getDict("source_type")
  },
  methods: {
    onReset() {
      this.searchInfo = {
        goodsType: 1,
      }
    },
    onDateChange(e) {
      if (e) {
        const [start, end] = e
        this.searchInfo.startData = start
        this.searchInfo.endData = end
      } else {
        this.searchInfo.startData = undefined
        this.searchInfo.endData = undefined
      }
    },
    checkFile(file) {
      this.fullscreenLoading = true
      const isJPG = file.type === "image/jpeg"
      const isPng = file.type === "image/png"
      const isLt2M = file.size / 1024 / 1024 < 0.5
      if (!isJPG && !isPng) {
        this.$message.error("上传图片只能是 jpg或png 格式!")
        this.fullscreenLoading = false
      }
      if (!isLt2M) {
        this.$message.error("图片大小不能超过 500KB")
        this.fullscreenLoading = false
      }
      return (isPng || isJPG) && isLt2M
    },
    uploadError() {
      this.$message({
        type: "error",
        message: "上传失败",
      })
      this.fullscreenLoading = false
    },
    uploadSuccess({ code, msg, data }) {
      this.fullscreenLoading = false
      if (code === 0) {
        this.$message({
          type: "success",
          message: "上传成功",
        })
        if (code === 0) {
          this.formData.goodsUrl = data.file.url
        }
      } else {
        this.$message({
          type: "warning",
          message: msg,
        })
      }
    },
    // 条件搜索前端看此方法
    onSubmit() {
      this.page = 1
      this.pageSize = 10
      this.getTableData()
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    deleteRow(row) {
      this.$confirm("确定要删除吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.deleteGoodsInfo(row)
      })
    },
    async onDelete() {
      const ids = []
      if (this.multipleSelection.length === 0) {
        this.$message({
          type: "warning",
          message: "请选择要删除的数据",
        })
        return
      }
      this.multipleSelection &&
        this.multipleSelection.map((item) => {
          ids.push(item.ID)
        })
      const res = await deleteGoodsInfoByIds({ ids })
      if (res.code === 0) {
        this.$message({
          type: "success",
          message: "删除成功",
        })
        if (this.tableData.length === ids.length && this.page > 1) {
          this.page--
        }
        this.deleteVisible = false
        this.getTableData()
      }
    },
    async updateGoodsInfo(row) {
      const res = await findGoodsInfo({ ID: row.ID })
      this.type = "update"
      if (res.code === 0) {
        this.formData = res.data.regoodsInfo
        this.dialogFormVisible = true
      }
    },
    closeDialog() {
      this.dialogFormVisible = false
      this.formData = {
        ..._formData,
      }
    },
    async deleteGoodsInfo(row) {
      const res = await deleteGoodsInfo({ ID: row.ID })
      if (res.code === 0) {
        this.$message({
          type: "success",
          message: "删除成功",
        })
        if (this.tableData.length === 1 && this.page > 1) {
          this.page--
        }
        this.getTableData()
      }
    },
    async enterDialog() {
      let res
      switch (this.type) {
        case "create":
          res = await createGoodsInfo(this.formData)
          break
        case "update":
          res = await updateGoodsInfo(this.formData)
          break
        default:
          res = await createGoodsInfo(this.formData)
          break
      }
      if (res.code === 0) {
        this.$message({
          type: "success",
          message: "创建/更改成功",
        })
        this.closeDialog()
        this.getTableData()
      }
    },
    openDialog() {
      this.type = "create"
      this.dialogFormVisible = true
    },
  },
}
</script>

<style></style>
